<!-- 推荐歌曲页面 -->
<template>
    <div class="recommend-song">
        <!-- 表格 -->
        <el-table :data="tableData" :header-cell-style="{backgroundColor:'#fafafa',height:'80px',fontSize:'15px'}" stripe highlight-current-row class="table">
            <el-table-column prop="name"  label="歌曲">
                <template #default="scope">
                    <div class="table-cell">
                        <img :src="getUrl(scope.row.songPic)" alt="">
                        <span @click="navigateTo">{{scope.row.name}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="singer" width="200%" label="歌手"></el-table-column>
            <el-table-column prop="duration" width="150%" label="时长">
                <template #default="scope">
                    <div >{{ useFormatDuring(scope.row.duration) }}</div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script  setup lang="ts">

import {getUrl,useFormatDuring} from '@/utils/format'
import {allSong} from '@/api'
import { ref } from 'vue';

const tableData = ref([])

getAllSong()
// 获取所有歌曲
async function getAllSong(){
   const res = await allSong('')
    tableData.value = res
}

// 跳转到歌曲详情
function navigateTo(){

}


</script>

<style scoped lang="scss">
.recommend-song{
    
}
.table{
    width: 100%;
    max-width: 1300px;
}
.table-cell{
    display: flex;
    align-items: center;
    img{
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin-right: 15px;
    }
    span{
        cursor: pointer;
    }
}
::v-deep .el-table__cell{
    border-bottom: 0 !important;
}
::v-deep .el-table__cell > .cell{
    white-space: nowrap;      /* 保持文本在一行内显示 */
    overflow: hidden;         /* 超出容器部分隐藏 */
    text-overflow: ellipsis;  /* 使用省略符号表示文本被截断 */
    padding: 0 20px;
}
::v-deep .el-table_2_column_6 > .cell{
    color: #999;
}
</style>

